/*
* @Author: wangliang
* @Date: 2018/4/10
* @description: 企业列表
*/
<template>
  <div>
    <el-form>
      <el-row>
        <el-col :span="10">
          <el-row>
            <el-col :span="18">
              <el-form-item label="查询" label-width="80px">
                <el-input v-model="companyListSearch.name" placeholder="请输入查询内容" @keyup.native.enter="getCompanyList()"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="" label-width="10px">
                <el-select v-model="companyListSearch.nameType" placeholder="请选择">
                  <el-option
                  v-for="(item, index) in dropDown.companySearchNameType"
                  :key="index"
                  :label="item.dictName"
                  :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-row>
            <el-col :span="11">
              <el-form-item label="运营标记" label-width="80px">
                <el-select v-model="companyListSearch.operate" placeholder="请选择">
                  <el-option label="请选择" value=""></el-option>
                  <el-option
                  v-for="(item, index) in dropDown.runStatus"
                  :key="index"
                  :label="item.dictName"
                  :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="质检状态" label-width="80px">
                <el-select v-model="testStatus" multiple placeholder="请选择" @change="changeQualityStatus">
                  <el-option
                  v-for="(item, index) in dropDown.qualityStatus"
                  :key="index"
                  :label="item.dictName"
                  :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4" class="space">
          <el-form-item>
            <el-button type="primary" round @click="getCompanyList()">搜索</el-button>
            <el-button type="primary" round @click="add()">添加</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="发布时间" label-width="80px">
            <el-row>
              <el-col :span="11">
                <el-date-picker
                v-model="companyListSearch.startTime"
                type="date"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd"
                style="width:100%">
                </el-date-picker>
              </el-col>
              <el-col :span="2" style="text-align:center">~</el-col>
              <el-col :span="11">
                <el-date-picker
                v-model="companyListSearch.endTime"
                type="date"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd"
                style="width:100%">
                </el-date-picker>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-row>
            <el-col :span="11">
              <el-form-item label="信息状态" label-width="80px">
                <el-select v-model="infoStatus" multiple placeholder="请选择" @change="changeInfoStatus">
                  <el-option
                  v-for="(item, index) in dropDown.infoStatus"
                  :key="index"
                  :label="item.dictName"
                  :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="身份标记" label-width="80px">
                <el-select v-model="companyListSearch.attributeStatus" placeholder="请选择">
                  <el-option label="请选择" value=""></el-option>
                  <el-option
                  v-for="(item, index) in dropDown.companyIdentity"
                  :key="index"
                  :label="item.dictName"
                  :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col>
        <span class="m-r-15 ca-info-color">已编辑信息：{{extMeta.imperfectCount}}条</span>
        <span class="m-r-15 ca-info-color">已发布信息：{{extMeta.publishCount}}条</span>
        <span class="ca-info-color-red">质检未通过信息：{{extMeta.qualityCount}}条</span>
      </el-col>
    </el-row>
    <el-row class='m-t-10'>
					<el-col>
						<el-table
							ref="multipleTable"
              stripe
							:data="data"
							style="width: 100%">
							<el-table-column
								sortable
								label="企业ID"
                prop="id"
								width="90"
								align="center">
							</el-table-column>
							<el-table-column
								label="企业名称"
								align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" placement="top">
                      <div slot="content">{{getName(scope.row)}}<br/>曾用名：{{scope.row.onceName.replace('|','、')}}</div>
                      <span>{{getName(scope.row).length>15 ? getName(scope.row).substring(0,15)+"..." : getName(scope.row)}}</span><br/>
                    </el-tooltip>
                </template>
							</el-table-column>
              <el-table-column
								prop="registerAddress"
								label="地域"
								width="100"
								align="center">
							</el-table-column>
							<el-table-column
								prop="orgCode"
								label="组织机构代码"
								width="100"
								align="center">
							</el-table-column>
              <el-table-column
								prop="productName"
								label="产品名称"
								width="100"
								align="center">
							</el-table-column>
							<el-table-column
                prop="publishDate"
								label="发布时间"
                width="130"
								align="center">
                <template slot-scope="scope">
                  <el-row>
                      <span>{{scope.row.publishDate | cmsMoment}}</span>
                  </el-row>
                  <el-row>
                      <span> {{scope.row.modifyId}}</span>
                  </el-row>
                </template>
							</el-table-column>
              <el-table-column
                prop="modifyTime"
								label="更新时间"
                width="130"
								align="center">
                <template slot-scope="scope">
                  <el-row>
                      <span>{{scope.row.modifyTime | cmsMoment}}</span>
                  </el-row>
                  <el-row>
                      <span> {{scope.row.modifyId}}</span>
                  </el-row>
                </template>
							</el-table-column>
							<el-table-column
                prop="infoStatus"
								label="信息状态"
                width="80"
								align="center">
                <template slot-scope="scope">
                  <span :class="scope.row.infoStateColor">
                    {{scope.row.infoStatus | getNameById('infoStatus')}}
                  </span>
                </template>
							</el-table-column>
							<el-table-column
                prop="qualityStatus"
								label="质检状态"
                width="80"
								align="center">
                <template slot-scope="scope">
                  <span :class="scope.row.qualityStatusColor">
                    {{scope.row.qualityStatus | getNameById('qualityStatus')}}
                  </span>
                </template>
							</el-table-column>
							<el-table-column
								prop="edit"
								label="操作"
								width="150"
								align="center">
                <template slot-scope="scope">
                    <el-button  type="text" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button  type="text" @click="delId(scope.row.id)">删除</el-button>
                    <el-button  type="text" @click="detail(scope.row)">信息详情</el-button>
                </template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<div class="m-t-20" >
					<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageParam.pageIndex"
					:page-sizes="[25,50,75,100]"
					:page-size="pageParam.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalCount">
					</el-pagination>
          <el-dialog
            :visible.sync="centerDialogVisible"
            :show-close='false'
            width="30%"
            center>
            <span slot="title" class="title-tip">
              <h3><i class="el-icon-warning"></i>请清楚关联关系!</h3>
            </span>
            <div class="dialog-info">
              <el-button type="info" :disabled="eventRelation" @click="jumpPage('event')">事件关系未清除</el-button>
              <el-button type="info" :disabled="orgRelation" @click="jumpPage('org')">机构管理团队未清除</el-button>
              <el-button type="info" :disabled="fundRelation" @click="jumpPage('fund')">基金管理团队未清除</el-button>
              <el-button type="info" :disabled="lpRelation" @click="jumpPage('lp')">LP管理团队未清除</el-button>
              <el-button type="info">人物关系未清除</el-button>
            </div>
            <el-steps :active="1" align-center>
              <el-step description="删除提示“清除关系”"></el-step>
              <el-step description="清除关系"></el-step>
              <el-step description="再次删除，检查“关系是否清除”"></el-step>
              <el-step description="清除关系，可以进行删除"></el-step>
            </el-steps>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="centerDialogVisible = false">关 闭</el-button>
            </span>
          </el-dialog>
				</div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { CompanyListSearchDto } from '../../../service/subject/company/companyInterface';
import { CompanyVO, PageParam } from '../../../api/Interface';
import ListService from '../../../service/subject/company/index';
import BasicInfoService from '../../../service/subject/company/basic-info/index';
import { getParamsForList, setParamsForList } from '../../../libs/utils';
@Component({
  components: { }
})
export default class CompanyList extends Vue {
  // 初始化数据 相当于data
  public companyListSearch: CompanyListSearchDto = {nameType: 'full_name'} as CompanyListSearchDto; // <PersonVo> {}
  public pageParam: PageParam = {pageIndex: 1, pageSize: 25} as PageParam; // <PersonVo> {}
  public totalCount: number = 0;
  public name: string = '按名称';
  public centerDialogVisible: boolean = false;
  public id: number;
  public testStatus: string[] = []; // 质检状态
  public infoStatus: string[] = []; // 信息状态
  public eventRelation: boolean = false; // 事件关系
  public orgRelation: boolean = false; // 机构管理团队关系
  public fundRelation: boolean = false; // 基金管理团队关系
  public lpRelation: boolean = false; // LP管理团队关系
  public dropDown: object = {
    companySearchNameType: this.$store.state.user.dictionary.dicList.companySearchNameType, // 企业列表页搜索下拉框
    runStatus: this.$store.state.user.dictionary.dicList.runStatus, // 运营
    qualityStatus: [{dictValue: '', dictName: '全部'}, ...this.$store.state.user.dictionary.dicList.qualityStatus], // 质检
    infoStatus: [{dictValue: '', dictName: '全部'}, ...this.$store.state.user.dictionary.dicList.infoStatus], // 信息状态
    companyIdentity: this.$store.state.user.dictionary.dicList.companyIdentityView, // 身份标记
  };
  public orgAttr: boolean = false;
  public lpAttr: boolean = false;
  public fundAttr: boolean = false;
  public valueArray: string[] = []; // 信息状态
  public extMeta = {
    imperfectCount: 0,
    publishCount: 0,
    qualityCount: 0,
  };
  public data: any[] = [];
  public infoStateColor = {
    //信息状态颜色
    '1010': 'ca-info-color__gray',
    '0100': 'ca-info-color__blue',
    '0000': 'ca-info-color__light-blue',
    '1111': 'ca-info-color__orange',
    '0010': 'ca-info-color__purple',
  };
  public qualityStatusColor = {
    //质检状态颜色
    1: 'ca-quality-color__white',
    2: 'ca-quality-color__green',
    3: 'ca-quality-color__red'
  };
  // refs

  // watch

  // 声明周期钩子
  public mounted() {
    // 获取local中存储的搜索条件
    const routerName = this.$root.$route.name;
    const localParams = getParamsForList(routerName);
    this.companyListSearch = Object.assign({}, this.companyListSearch, localParams.searchParams);
    this.pageParam = Object.assign({}, this.pageParam, localParams.pageParam);
    this.infoStatus = localParams.infoStatus ? localParams.infoStatus : [];
    this.testStatus = localParams.testStatus ? localParams.testStatus : [];
    // 获取local中存储的搜索条件 end
    this.getCompanyList();
    this.getExtmeta();
  }

  // 方法
  public getName(info: CompanyVO) {
    return info.shortName !== '' ? info.shortName : info.fullName !== '' ? info.fullName : info.intShortName !== '' ? info.intShortName : info.intFullName;
    
  }
  // 改变每页条数
  public handleSizeChange(pageSize: number) {
    this.pageParam.pageSize = pageSize;
    this.getCompanyList();
  }
  // 切换页码
  public handleCurrentChange(val: number) {
    this.pageParam.pageIndex = val;
    this.getCompanyList();
  }
  // 添加
  public add() {
    this.$router.push({name: 'company-detail', params: {itemId: '-1'}});
  }
  // 编辑
  public edit(id: string) {
    this.$router.push({name: 'company-detail', params: {itemId: id}});
  }
  // 信息详情
  public detail(info: CompanyVO ) {
    const title = this.getName(info);
    this.$router.push({ name: 'operation-history', params: { businessName: 'company', businessId: info.id.toString(), businessType: '1', title: encodeURIComponent(title) }});
  }
  // 选择全部信息状态
  public changeInfoStatus(val: string[]) {
      if (!(val.indexOf('') === -1)) {
          this.infoStatus = [];
          const infos = this.$store.state.user.dictionary.dicList.infoStatus;
          infos.map(item => {
              this.infoStatus.push(item.dictValue);
          });
      }
  }
  // 选择全部质检状态
  public changeQualityStatus(val: string[]) {
      if (!(val.indexOf('') === -1)) {
          this.testStatus = [];
          const qualitys = this.$store.state.user.dictionary.dicList.qualityStatus;
          qualitys.map(item => {
              this.testStatus.push(item.dictValue);
          });
      }
  }
  // 获取列表页
  public async getCompanyList() {
    this.companyListSearch['pageParam.pageIndex'] = this.pageParam.pageIndex;
    this.companyListSearch['pageParam.pageSize'] = this.pageParam.pageSize;
    if (this.infoStatus.length > 0) {
      this.companyListSearch.infoStatus = this.infoStatus.join(',');
    } else {
      delete this.companyListSearch.infoStatus;
    }
    if (this.testStatus.length > 0) {
      this.companyListSearch.qualityStatus = this.testStatus.join(',');
    } else {
      delete this.companyListSearch.qualityStatus;
    }
    // local中存当前搜索条件 
    const params = {
      pageParam: this.pageParam,
      searchParams: this.companyListSearch,
      infoStatus: this.infoStatus,
      testStatus: this.testStatus
    };
    const routerName = this.$root.$route.name;
    setParamsForList(params, routerName);
    // local中存当前搜索条件 end
    // console.log(this.companyListSearch);
    const res = await ListService.companyPage(this.companyListSearch);
    this.data = res.data.resultData;
    this.totalCount = res.data.totalCount;
    this.data.map(val => {
      // 列表信息状态颜色
      val.infoStateColor = this.infoStateColor[val.infoStatus];
      // 列表质检状态颜色
      val.qualityStatusColor = this.qualityStatusColor[val.qualityStatus];
    });
  }
  // 获取统计数据
  public async getExtmeta() {
    const res = await ListService.getCompanyCountInfo();
    this.extMeta = res.data;
  }
  // 删除 centerDialogVisible = true
  public async delId(id: number) {
    await this.getIdentification(id);
    this.id = id;
    const res = await ListService.getDeleteCompanyCheck(id);
    if (res.data.eventRelation === 0 && res.data.fundRelation === 0 && res.data.lpRelation === 0 && res.data.orgRelation === 0 && res.data.personRelation === 0) {
      this.$confirm('删除此条信息！', '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
        }).then(async () => {
            await ListService.deleteCompany(id);
            this.$message.success('删除成功！');
            this.getCompanyList();
        }).catch(() => {
          return false;
        });
    } else {
      if (res.data.eventRelation !== 0) {
        this.eventRelation = true;
      }
      if (res.data.fundRelation !== 0) {
        this.fundRelation = true;
      }
      if (res.data.lpRelation !== 0) {
        this.lpRelation = true;
      }
      if (res.data.orgRelation !== 0) {
        this.orgRelation = true;
      }
      this.centerDialogVisible = true;
    }
  }
  // 获取身份标识
  public async getIdentification(id: number) {
    const res = await BasicInfoService.getCompanyById(id);
    if (res.resCode === '0') {
      if (res.data.orgAttr === 1) { // 机构属性
        this.orgAttr = true;
      } else {
        this.orgAttr = false;
      }
      if (res.data.lpAttr === 1) { // lp属性
        this.lpAttr = true;
      } else {
        this.lpAttr = false;
      }
      if (res.data.fundAttr === 1) { //基金属性
        this.fundAttr = true;
      } else {
        this.fundAttr = false;
      }
    }
  }
  // 跳转关联关系页面
  public jumpPage(type: string) {
    // 机构
    if (type === 'org') {
      if (this.orgAttr) {
        this.$router.push({name: 'company-detail', params: {itemId: this.id.toString(), tabIndex: '2'}});
      } else {
        this.$router.push({name: 'company-detail', params: {itemId: this.id.toString(), tabIndex: '0'}});
      }
    }
    // lp
    if (type === 'lp') {
      if (this.lpAttr) {
        this.$router.push({name: 'company-detail', params: {itemId: this.id.toString(), tabIndex: '3'}});
      } else {
        this.$router.push({name: 'company-detail', params: {itemId: this.id.toString(), tabIndex: '0'}});
      }
    }
    // 基金
    if (type === 'fund') {
      if (this.fundAttr) {
        this.$router.push({name: 'company-detail', params: {itemId: this.id.toString(), tabIndex: '4'}});
      } else {
        this.$router.push({name: 'company-detail', params: {itemId: this.id.toString(), tabIndex: '0'}});
      }
    }
    // 事件
    if (type === 'event') {
      this.$router.push({name: 'transaction-edit', params: {eventId: this.id.toString(), tabIndex: '0'}});
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title-tip h3{
  font-size: 18px;
  font-weight: normal;
}
.title-tip h3 i{
  color: red;
  font-size: 22px;
  margin-right: 10px;
}
.dialog-info{
  text-align: center;
  padding-bottom: 20px;
}
.dialog-info .el-button {
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

</style>
